<template>
    <div>
        <el-dialog title="添加订阅" 
        :visible.sync="dialogTableVisible" 
        :close-on-click-modal="false"
        width="950px">
            <div class="navBar">
                <el-checkbox-group v-model="checkList2" class="checkedType">
                    <el-checkbox label="5">创业板50</el-checkbox>
                    <el-checkbox label="4">中证500</el-checkbox>
                    <el-checkbox label="3">沪深300</el-checkbox>
                    <el-checkbox label="2">上证50</el-checkbox>
                    <el-checkbox label="1">MSCI</el-checkbox>
                </el-checkbox-group>

                <el-input
                    placeholder="企业名称或代码"
                    size="mini"
                    v-model="searchGridData.name"
                    clearable>
                </el-input>

                <el-button @click="searchCom" class="rightMargin" type="primary" size="mini">搜 索</el-button>
            </div>

            <el-table height="250" :data="gridData" @selection-change='handleSelectionChange' style="margin-top:20px;">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column property="code" label="企业代码" width="150"></el-table-column>
                <el-table-column property="name" label="企业名称" width="200"></el-table-column>
                <el-table-column property="address" label="企业类型">
                     <template slot-scope="scope">
                        <span v-for="(item,index) in scope.row.c_type" :key="index">{{item.name}} <span v-if="index !== scope.row.c_type.length - 1">、</span></span>
                    
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
            class="paganitionRight"
            @current-change="handleGridDataSizeChange"
            :page-size="100"
            layout="total, prev, pager, next"
            :total="gridDatatotalCount">
            </el-pagination>
            
             <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="addsubconfirm">添 加</el-button>
                <el-button size="mini"  @click="dialogTableVisible = false">取 消</el-button>
            </span>
        </el-dialog>


        <div class="navBar navRight">
            <span>企业类型：</span>
            <el-checkbox-group v-model="checkList">
                <el-checkbox label="5">创业板50</el-checkbox>
                <el-checkbox label="4">中证500</el-checkbox>
                <el-checkbox label="3">沪深300</el-checkbox>
                <el-checkbox label="2">上证50</el-checkbox>
                <el-checkbox label="1">MSCI</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="topSearch navRight">
            <el-button size="mini" @click="addsub">添 加</el-button>
            <div class="rightWay">
                <el-input
                placeholder="企业名称或代码"
                size="mini"
                v-model="searchData.name"
                clearable>
                </el-input>

                <el-date-picker
                    v-model="searchData.start"
                    placeholder="开始日期"
                    type="date"
                    size="mini"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                </el-date-picker>

                <el-date-picker
                    v-model="searchData.end"
                    placeholder="结束日期"
                    type="date"
                    size="mini"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                </el-date-picker>

                <el-button @click="searchSub" class="rightMargin" type="primary" size="mini">搜 索</el-button>
            </div>
        </div>

        <div>

            <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%; margin-top:20px;">
                <el-table-column
                label="企业代码"
                width="130">
                <template slot-scope="scope">
                    <span>{{ scope.row.com.code }}</span>
                </template>
                </el-table-column>
                <el-table-column
                label="企业名称"
                width="">
                    <template slot-scope="scope">
                        <span>{{ scope.row.com.name }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                label="企业类型"
                width="240">
                    <template slot-scope="scope">
                        <span v-for="(item, index) in scope.row.com.c_type" :key="index">{{item}} <span v-if="index !== scope.row.com.c_type.length - 1"> 、</span></span>
                    </template>
                </el-table-column>
                
                <el-table-column
                label="订阅时间"
                width="180"
                prop="create">
                </el-table-column>
                

                <el-table-column
                label="操作"
                width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column> 
            </el-table>

            <el-pagination
            class="paganitionRight"
            @current-change="handleDataSizeChange"
            :page-size="10"
            :pager-count="9"
            layout="total, prev, pager, next"
            :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import qs from 'qs';
export default {
    name:'customerAside',
    props: ['flag'],
    data () {
        return {
            use:'',
            uid:'', //用户id，通过参数传入
            message: '',
            checkList: [],
            checkList2: [], // 弹出框筛选
            searchData:{
                code: '', // 企业代码
                name: '', //企业名称
                start: '', // 日期开始
                end: ''  //日期结束
            },
            searchGridData:{
                code: '', // 企业代码
                name: '', //企业名称
                start: '', // 日期开始
                end: ''  //日期结束
            },
            qiyeCode:'',
            qiyeName:'',
            value7: '',
            tableData: [],
            totalCount: 0, // 总数据条数
            curIndex: 1, // 当前页面

            gridData: [],  // 弹框的表格内容
            gridDatatotalCount: 0,  // 弹窗总数据条数
            gridDatacurIndex: 1,  // 弹窗当前页面

            dialogTableVisible: false,
            multipleSelection: []
        }
    },
    mounted () {
        this.uid = this.$route.query.id;
        if (this.flag === '1') {
            this.use='投票建议';
            if(this.uid){
                this.$axios.get(`/api/kehu/${this.uid}/subs/`,{
                    params: {
                        use: '投票建议',
                        is_active: true
                    }
                })
                .then((res)=>{
                    console.log(res.data.results);
                    // this.tableData = res.data.results;
                    this.totalCount = res.data.count;
                    this.tableData = res.data.results;

                })
                .catch((error)=>{
                    console.log(error);
                })
            }

        }else if (this.flag === '2') {
            this.use='治理风险研究';
            if(this.uid){
                this.$axios.get(`/api/kehu/${this.uid}/subs/`,{
                    params: {
                        use: '治理风险研究'
                    }
                })
                .then((res)=>{
                    console.log(res.data.results);
                    // this.tableData = res.data.results;
                    this.totalCount = res.data.count;
                    this.tableData = res.data.results;

                })
                .catch((error)=>{
                    console.log(error);
                })
            }
        }
    },
    methods: {
        getData () {
            let params = {
                page: this.curIndex,
                search: this.searchData.name,
                use: this.use,
                start: this.searchData.start,
                end: this.searchData.end,
                com__c_type: this.checkList
            };
            this.$axios.get(`/api/kehu/${this.uid}/subs/`, {
                params: {
                    ...params
                },
                paramsSerializer : (params) => {
                    return qs.stringify(params, {arrayFormat: 'repeat'})
                }
            }).then(res => {
                if (res.status === 200) {
                    this.totalCount = res.data.count;
                    this.tableData = res.data.results;
                }
            })
            
        },
        // 订阅翻页
        handleDataSizeChange(page){
            this.curIndex = page;
            this.getData();
        },
        // 弹出窗口企业列表
        getGridData () {
            console.log(this.checkList2);
            let params = {
                    page: this.gridDatacurIndex,
                    search: this.searchGridData.name,
                    is_active: true,
                    c_type: this.checkList2,
                    page_size: 100
            };
            this.$axios.get('/api/com/',{
                params: {
                    ...params
                },
                paramsSerializer : (params) => {
                    return qs.stringify(params, {arrayFormat: 'repeat'})
                }
            })
            .then(res => {
                console.log(res);
                if (res.status === 200) {
                    this.gridDatatotalCount = res.data.count;
                    this.gridData = res.data.results;
                }
            })
        },
        handleGridDataSizeChange(val){
            //  添加订阅弹窗
            this.gridDatacurIndex = val;
            this.getGridData();
            
        },
        // 添加订阅模态框
        addsub(){
            this.dialogTableVisible = true;
            this.getGridData();
        },
        addsubconfirm(){
            // 确定订阅
            console.log(this.use);
            console.log(this.uid);
            let com = [];
            this.multipleSelection.forEach((val, index) =>{
                com.push(val.id);
            })
            console.log(com);
            this.$axios.post(`/api/kehu/${this.uid}/subs/`, JSON.stringify(
                {
                    use: this.use,
                    com: com
                }
            ))
            .then((res)=>{
                console.info(res);
                if(res.status === "ok"){
                   this.$message({message:'恭喜你，订阅成功', type: 'success'});
                }
                this.dialogTableVisible = false;
                this.curIndex = 1;
                this.getData();
                this.$emit('orderChangeChild',{'use': this.use, action:'add'});
            })
            .catch((error)=>{

            })
        },
        handleDelete(row){
            console.log(row.id)
            // 删除订阅
            this.$confirm('此操作将取消该订阅, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.delete(`/api/sub/${row.id}/`)
                .then((res)=>{
                    if(res.status === 204){
                        this.$message({
                            message:'删除成功',
                            type:'success'
                        });
                        this.getData();
                        this.$emit('orderChangeChild',{'use': this.use, action:'del'});

                    }
                })
                .catch((error)=>{
                    console.log(error);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            })





            
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection);

        },
        // 添加订阅窗口的检索
        searchCom(){
            this.gridDatacurIndex = 1;
            this.getGridData();
        },
        // 已订阅检索
        searchSub(){
            this.curIndex = 1;
            this.getData();
        }

    }
}   
</script>
<style lang="scss" scoped>
.navBar {
    display: flex;
    justify-content: flex-end;
    padding: 5px 0;
}
.navRight {
    margin-right: 10px;
}
.topSearch {
    margin-top: 10px;
}
.rightWay {
    float: right;
    // margin-top: 20px;
}
.topMsg {
    margin-bottom: 10px;
}
.el-input {
    width: 170px!important;
}
.checkedType {
    display: flex;
    align-items: center;
    margin-right: 20px;
}
.el-dialog__body {
    padding: 0 20px 60px 20px;
    color: #606266;
    font-size: 14px;
}
.dialogBtns {
    float: right;
    margin-top: 15px;
}
</style>

